বুটস্ট্রাপে নিম্নলিখিত আকৃতির ইমেজের জন্য ইমেজ ক্লাস রয়েছে।
বুটস্ট্রাপ ইমেজের এই অধ্যায়টিতে আমরা উল্লেখিত আকৃতির ইমেজের উদাহরণ প্রদর্শন করেছি।
ইমেজের কর্ণার বা কোণগুলোকে রাউন্ড করার জন্য .img-rounded
ক্লাসটি ব্যবহার করা হয়। (IE8 রাউন্ড কর্নার সাপোর্ট করে না):
kt_satt_skill_example_id=830
ইমেজকে বৃত্তাকার বা গোলাকার করে প্রদর্শন করানোর জন্য এলিমেন্টের মধ্যে
.img-circle
ক্লাস ব্যবহার করুন। একটি ইমেজকে সার্কেলের আকৃতিতে নিয়ে আসে (IE8 এ রাউন্ড ইমেজ সাপোর্ট করে না):
kt_satt_skill_example_id=841
ইমেজকে Thumbnail এর আকৃতিতে দেখানোর জন্য .img-thumbnail
ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=843
ইমেজকে যেকোন আকারেই রুপান্তর করা যায়। অর্থাৎ ইমেজের যেকোন আকারই নির্ধারণ করে আপনি তা প্রদর্শন করাতে পারবেন। রেসপন্সিভ ইমেজ স্বয়ংক্রিয়ভাবে সকল ডিভাইসের স্ক্রিনের সাথে এডজাস্ট করে নেয়।
ইমেজকে রেসপন্সিভ করার জন্য ট্যাগের মধ্যে
.img-responsive
ক্লাসটি ব্যবহার করুন।
.img-responsive
ক্লাস ইমেজটিতে সিএসএসের display: block;
, max-width: 100%;
এবং height: auto;
প্রোপার্টিগুলো যুক্ত করেঃ
kt_satt_skill_example_id=846
বুটস্ট্রাপের মাধ্যমে ইমেজ গ্যালারি তৈরি করার জন্য আপনাকে .thumbnail
ক্লাসের সাথে গ্রীড সিস্টেম ব্যবহার করতে হবে। নিচের উদাহরণে .thumbnail
ক্লাস এবং গ্রীড সিস্টেম সাহায্যে একটি ফটো গ্যালারি তৈরি করে দেখানো হলোঃ
kt_satt_skill_example_id=848
ভিডিও অথবা স্লাইড শো যেকোনো ডিভাইসে ভালোভাবে চলার জন্য রেসপন্সিভ করতে হয়।
রেসপন্সিভ সংক্রান্ত ক্লাসগুলি সরাসরি ,
,
এবং
এলিমেন্টে ব্যবহার করা যায়।
নিম্নলিখিত উদাহরণে kt_satt_skill_example_id=850 দুইটি আয়তকার অনুপাত থেকে আপনার প্রয়োজন অনুযায়ী একটি অনুপাত বেছে নিনঃ kt_satt_skill_example_id=852 ট্যাগের মধ্যে
.embed-responsive-item
ক্লাস যুক্ত করে একটি রেসপন্সিভ ভিডিও তৈরি করে দেখানো হলো। ধারনকারী একনজরে ইমেজ সংক্রান্ত ক্লাসগুলো দেখে নেইঃ
ক্লাস বর্ণনা .img-rounded
ইমেজে রাউন্ড কর্ণার যুক্ত করে (ইন্টারনেট এক্সপ্লোরার ৮ এ সাপোর্ট করে না) .img-circle
ইমেজের আকৃতি বৃত্তের মতো করে (ইন্টারনেট এক্সপ্লোরার ৮ এ সাপোর্ট করে না) .img-thumbnail
ইমেজের আকৃতি thumbnail এর মতো করে। .img-responsive
একটি ইমেজকে রেসপন্সিভ করার জন্য ব্যবহার করা হয়।
আরও দেখুন...